<!--
 * @Author: lmk
 * @Date: 2022-04-15 22:27:06
 * @LastEditTime: 2022-07-01 11:13:44
 * @LastEditors: lmk
 * @Description: 
-->
<template>
  <pageView pageName="news" :isShowSearch="false"  bannerImage="/img/banner/newbanner.png">
    <div class="about-view">
      
      <div class="flex justify-between title-box">
        <p class="title">{{isZh ? state.info.informationTitle : state.info.informationTitleEnglish}}</p>
        <p class="right-detail-info self-center hide-mobile">
          <span>{{$t('news.releaseTime')}}：{{state.info.informationCreateTime}}</span>
          <span>{{$t('news.ready')}}：{{state.info.informationViewsNumber}}</span>
        </p>
      </div>
      <img src="/img/activity/a-line.png" alt="">
      <div class="content" v-html="isZh ? state.info.informationDetail : state.info.informationDetailEnglish"></div>
    </div>
  </pageView>
</template>

<script setup>
import { getWebsiteInformationById } from '@/api/api'
import pageView from '@/components/pageView'
import { useIsZh } from '@/utils/useIsZh'
import { reactive } from '@vue/reactivity'
import { useRoute } from 'vue-router'
const route = useRoute()
const {params} = route
const {id} = params
const state = reactive({
  info:''
})
getWebsiteInformationById({informationId:id}).then(res=>{
  state.info = res;
})
const {isZh} = useIsZh()
</script>

<style lang="scss" scoped>

@media screen and (min-width: 1401px) {
  .about-view{
    background: #FFFAF5;
    overflow: hidden;
    .title-box{
      margin-top: 117px;
      padding: 0 80px;
      margin-bottom: 30px;
    }
    .title{
      font-size: 24px;
      font-weight: bold;
      color: #202020;
    }
    .right-detail-info{
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      span:last-child{
        display: inline-block;
        margin-left: 20px;
      }
    }
    .content{
      padding: 19px 80px 70px;
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      line-height: 30px;
    }
  }
}
@media screen and (max-width: 1400px) {
  .about-view{
    background: #FFFAF5;
    overflow: hidden;
    .title-box{
      padding: 15px 10px;
    }
    .title{
      font-size: 12px;
      font-weight: bold;
      color: #202020;
    }
    .content{
      padding:10px;
      font-size: 7px;
      font-weight: 400;
      color: #666666;
      line-height: 15px;
    }
  }
}

</style>